<template>
	<view class="add bg_color pddbom10">
		<view v-if="!isEnter">
		<view class="tit">
			<view class="text">地址信息</view>
			<view class="xing">*</view>
		</view>
		<Form ref="formRef" :formList="formList" :formData="formData"></Form>
		<view class="butt font28" @click="addItem">提交</view>
		</view>
		<SubmitState v-else :success="success" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
	</view>
</template>
<script>
export const formList1 = [
	{
		label: '所在地区',
		prop: 'province',
		type: 'picker',
		placeholder: '请选择所在地区',
		rules: [
			{
				required: true,
				message: '请选择所在地区',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		]
	},
	{
		label: '类行政区域',
		prop: 'administrativeRegion',
		type: 'popup',
		placeholder: '请选择类行政区域',
		columns: [
			// { name: '类行政区域1', value: '类行政区域2' },
			// { name: '其他', value: '其他' }
		],
		rules: [
			{
				required: true,
				message: '请输入类行政区域',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '区划内详细地址',
		prop: 'place',
		type: 'text',
		placeholder: '请输入区划内详细地址',
		rules: [
			{
				required: true,
				message: '请输入区划内详细地址',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '地址元素名称',
		prop: 'elementName',
		type: 'text',
		placeholder: '请输入地址元素名称',
		rules: [
			{
				required: true,
				message: '请输入地址元素名称',
				trigger: ['change', 'blur'],
			}
		]
	},
	{
		label: '警务责任区代码',
		prop: 'responsibilityCode',
		type: 'text',
		placeholder: '请输入警务责任区代码',
		rules: [
			{
				required: true,
				message: '请输入警务责任区代码',
				trigger: ['change', 'blur'],
			},
			{
				pattern: /^[a-zA-Z0-9]+$/,
				message: '只能输入字母和数字',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '所属社区/居(村)委会(选填)',
		prop: 'communityVillage',
		type: 'text',
		placeholder: '请输入社区/居委会/村委会名称',
	},
	{
		label: '地址编码',
		prop: 'addressCode',
		type: 'text',
		placeholder: '请输入地址编码',
		rules: [
			{
				required: true,
				message: '请输入地址编码',
				trigger: ['change', 'blur'],
			}
		]
	},
	{
		label: '城乡分类',
		prop: 'urbanRural',
		type: 'popup',
		placeholder: '请选择城乡分类',
		columns: [
			// { name: '城乡分类1', value: '城乡分类1' },
			// { name: '城乡分类2', value: '城乡分类2' }
		],
		rules: [
			{
				required: true,
				message: '请输入城乡分类',
				trigger: ['change', 'blur'],
			}
		]
	},
	{
		label: '所属建筑物(选填)',
		prop: 'belongingBuildings',
		type: 'text',
		placeholder: '请填写所属建筑物',
	},
	{
		label: '所属社区(警务)网格(选填)',
		prop: 'communityGrid',
		type: 'text',
		placeholder: '社区(警务)网格名称',
	}
];
</script>
<script setup>
import Form from 'com/Form.vue';
import SubmitState from 'com/modal/SubmitState.vue';
import Api from 'api';
import { dictStore } from 'store/dicts.js';
const api = new Api
const store1 = dictStore();
const formRef = ref(null);
const formList = ref([...formList1])
onLoad(async(query)=>{
	const res = await store1.getDict({ code: 'urban_type' })
	formList.value[7].columns = res
	const res1 = await store1.getDict({ code: 'administrative_region' })
	formList.value[1].columns = res1
	if(query.id){
		uni.setNavigationBarTitle({
					title: '编辑标准地址'
				})
		id.value = query.id
		const res = await api.queryById('baseAddress',{id:query.id})
		formData.value = res
		
	}else{
		uni.setNavigationBarTitle({
					title: '新增标准地址'
				})
	}
})
const id = ref('');
const isEnter = ref(false);
const success = ref(false);
const formData = ref({
	province: '',
	administrativeRegion: '',
	place: '',
	elementName: '',
	responsibilityCode: '',
	communityVillage: '',
	addressCode:'',
	urbanRural:'',
	belongingBuildings:'',
	communityGrid:'',
});

const addItem = () => {
	formRef.value.submit(async () => {
		let res;
		if (id.value) {
			res = await api.edit('baseAddress', unref(formData));
		} else {
			res = await api.add('baseAddress', unref(formData));
		}
		success.value = res;
		isEnter.value = true;
	});
};
const fanhui = () => {
	uni.navigateBack()
};
</script>

<style lang="scss" scoped>
.add {
	min-height: 100vh;
}
.xinzen {
	width: 322rpx;
	height: 96rpx;
	border-radius: 16rpx;
	border: 2rpx dashed #bbbbbb;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 32rpx auto;
	.tex {
		margin-left: 6rpx;
	}
}
.butt {
	line-height: 96rpx;
	text-align: center;
	margin: 48rpx auto;
	width: 686rpx;
	height: 96rpx;
	background-color: #458cff;
	border-radius: 16rpx;
	color: #ffffff;
}
.deleteDang {
	display: flex;
	justify-content: center;
	align-items: center;
	.tex {
		color: #ff4646;
		margin-left: 6rpx;
	}
}
</style>
